<template>
    <el-table :data="tableData" border
              v-loading="pageLoading"
              @selection-change="selectDataAction"
              height="90%"
              class="table">
        <el-table-column type="index" width="50"/>
        <el-table-column type="selection" width="55"/>
        <#list tableFields as field>
            <el-table-column prop="${field.name}" label="${field.comment}" width="180"/>
        </#list>
        <el-table-column fixed="right" label="操作" min-width="100">
            <template #default="scope">
                <${humpName}Detail :detailId="scope.row.id"/>
                <${humpName}Update :updateId="scope.row.id"/>
            </template>
        </el-table-column>
    </el-table>
    <div class="pageNation">
        <el-pagination
                v-model:current-page="searchStore.page.pageNum"
                v-model:page-size="searchStore.page.pageSize"
                :page-sizes="[10,20,30,50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Number(searchStore.page.total)"
                background
                @size-change="pageSizeChangeAction"
                @current-change="pageNumChangeAction"
        />
    </div>
</template>

<script setup>
    import {ref, onBeforeMount, onUnmounted, watch} from "vue";
    import {get${humpName}Page} from "@/api/${serviceName}/${humpName}Api.js";
    import {useSearchStore} from "@/store/SearchStore.js";
    import {filterProperty} from "@/util/Func.js";
    import ${humpName}Detail from "../components/${humpName}Detail.vue";
    import ${humpName}Update from "./${humpName}Update.vue";

    onBeforeMount(() => {
        get${humpName}PageAction()
    })

    onUnmounted(() => {
        searchStore.pageInit()
    })

    const searchStore = useSearchStore()
    const pageLoading = ref(true)
    const tableData = ref([])

    // 监听刷新变化
    watch(() => searchStore.page.refresh, (newValue) => {
        if (newValue) {
            get${humpName}PageAction()
            searchStore.completeRefresh()
        }
    })

    // 监听查询条件变化
    watch(() => searchStore.searchCondition, () => {
        get${humpName}PageAction()
    })

    const selectDataAction = (selectedData) => {
        let tempSelect = ''
        selectedData.forEach(item => {
            tempSelect = tempSelect + item.id + ","
        })
        searchStore.selectIds = String(tempSelect).substring(0, tempSelect.length - 1)
    }

    const get${humpName}PageAction = () => {
        pageLoading.value = true
        get${humpName}Page({
            ...filterProperty(searchStore.page), ...searchStore.searchCondition
        }).then(res => {
            tableData.value = res.data.records
            searchStore.page.total = res.data.totalRow
            pageLoading.value = false
        })
    }

    const pageNumChangeAction = (pageNum) => {
        searchStore.page.pageNum = pageNum
        get${humpName}PageAction()
    }

    const pageSizeChangeAction = (pageSize) => {
        searchStore.page.pageSize = pageSize
        get${humpName}PageAction()
    }

</script>
